<template>
	<navigator class="box" url="/pages/account_security_center/account_security_center">
		<view class="item">
			<view class="l">
				<text>账号安全中心</text>
				<text>查看实名认证，管理收款方式</text>
			</view>
			<image src="/static/icon/to_right.png" />
		</view>
	</navigator>
	<view class="box">
		<view class="item"><text class="t">手机号</text><text
				style="font-size: 30rpx;">{{memberInfo?.phone || '--'}}</text></view>
		<view class="item"><text class="t">用户ID</text><text
				style="font-size: 30rpx;">{{memberInfo?.memberId || '--'}}</text></view>
	</view>
	<view class="box">
		<navigator class="item"
			:url="'/pages/web/web?src='+encodeURIComponent('https://hsstatic.meijingnet.cn/user_agreement.html')">
			<text class="t">用户协议</text>
			<image src="/static/icon/to_right.png" />
		</navigator>
		<navigator class="item"
			:url="'/pages/web/web?src='+encodeURIComponent('https://hsstatic.meijingnet.cn/privacy_policy.html')">
			<text class="t">隐私政策</text>
			<image src="/static/icon/to_right.png" />
		</navigator>
		<view class="item" @click="clear">
			<text class="t">缓存清理</text>
			<image src="/static/icon/to_right.png" />
		</view>
		<view class="item"><text class="t">版本号</text><text style="font-size: 30rpx;">{{varsion}}</text></view>
	</view>
	<view class="box" @click="yaozhuxiao">
		<view class="item">
			<view class="l">
				<text>注销账户</text>
				<text>注销后账户信息无法恢复，请谨慎操作</text>
			</view>
			<image src="/static/icon/to_right.png" />
		</view>
	</view>
	<view class="logout_btn" @click="logout">退出登录</view>

	<view class="mask" v-if="zhuxiao">
		<view class="dialog">
			<image src="/static/icon/close.png" class="close" @click="zhuxiao=false" />
			<view class="content">注销后，账户信息无法恢复，请谨慎操作</view>
			<view class="btn_box">
				<view @click="zhuxiao=false">暂不注销</view>
				<view @click="logoff">确认注销</view>
			</view>
		</view>
	</view>

	<uni-popup ref="popup" type="bottom" border-radius="30rpx 30rpx 0 0" background-color="#fff" safe-area>
		<view
			style="display: flex;align-items: center;justify-content: space-between;height: 112rpx;width: 100%;padding: 36rpx;box-sizing: border-box;">
			<text style="font-size: 32rpx;font-weight: bold;justify-self: sta;">注销失败</text>
			<image src="/static/icon/close.png" style="height: 40rpx;width: 40rpx;" @click="this.$refs.popup.close()">
			</image>
		</view>
		<navigator class="xieyi_box" url="/pages/wallet/wallet"
			style="font-size: 30rpx;margin: 100rpx 36rpx 140rpx 36rpx;justify-content: space-between;width: 678rpx;height: 40rpx;display: flex;align-items: center;">
			<image src="/static/withdraw/bank.png" mode="heightFix" style="height: 40rpx;margin-right: 10rpx;" />
			<text style="flex: 1;">您的账户钱包还有余额：¥{{memberInfo?.balance || 0}}</text>
			<image src="/static/icon/to_right.png" mode="heightFix" style="height: 40rpx;"></image>
		</navigator>
		<view class="from_btn_box">
			<view class="reset" @click="this.$refs.popup.close()" style="width: 100%;">我知道了</view>
		</view>
	</uni-popup>
</template>

<script>
	import api from '@/utils/api.js';
	export default {
		data() {
			return {
				varsion: '',
				memberInfo: null,
				zhuxiao: false,
			}
		},
		async onLoad() {
			this.varsion = getApp().globalData.varsion;
			let {
				result = null
			} = await api.member_info();
			this.memberInfo = result;
		},
		methods: {
			clear() {
				uni.showLoading({
					mask: true,
					title: '清理中'
				})
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '清理成功',
						icon: 'success',
						duration: 1500
					})
				}, 2000)
			},
			yaozhuxiao() {
				if (this.memberInfo.balance > 0) {
					this.$refs.popup.open();
				} else {
					this.zhuxiao = true
				}
			},
			logout() {
				getApp().globalData.token = null;
				uni.removeStorage({
					key: "token"
				})
				uni.showToast({
					title: '退出登录成功',
					icon: 'success',
					duration: 1500
				})
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}, 2000)
			},
			async logoff() {
				await api.del_member_info();
				getApp().globalData.token = null;
				uni.removeStorage({
					key: "token"
				})
				uni.showToast({
					title: '注销成功',
					icon: 'success',
					duration: 1500
				})
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}, 2000)
			},
		}
	}
</script>

<style>
	.box {
		padding: 0 36rpx;
	}

	.box .item {
		width: 100%;
		height: 120rpx;
		border-bottom: 1px solid #CAD5E2;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.box .item .t {
		color: #62748E;
		font-size: 30rpx;
	}

	.box .item .l {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		height: 100%;
		gap: 20rpx;
	}

	.box .item .l text:first-child {
		font-size: 30rpx;
		line-height: 30rpx;
	}

	.box .item .l text:last-child {
		color: #62748E;
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.box .item:last-child {
		border-bottom: none;
	}

	.box .item image {
		height: 32rpx;
		width: 32rpx;
	}

	.logout_btn {
		width: 678rpx;
		height: 100rpx;
		background-color: #FFDF20;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		margin: 100rpx 36rpx;
	}
</style>